import $ from 'jquery'
import movie from '@/assets/movie.mp4'
import music from '@/assets/music.mp3'
import style from './index.module.less'

function init() {
  const container = $('<div>').addClass(style.container).appendTo($('#app'))
  const video = $('<video>')
    .prop('src', movie)
    .prop('loop', true)
    .prop('autoplay', true)
    .addClass(style.movie)
    .appendTo(container)
  const audio = $('<audio>')
    .prop('src', music)
    .prop('loop', true)
    .prop('autoplay', true)
    .appendTo(container)

  $('<h1>')
    .text('豆瓣电影')
    .addClass(style.word)
    .appendTo(container)

  $(window).on('scroll', function () {
    const index = document.documentElement.scrollTop
    const vHight = document.documentElement.clientHeight
    if (index > vHight) {
      video[0].pause()
      audio[0].pause()
    } else {
      video[0].play()
      audio[0].play()
    }
  })
}

init()